<script setup>

import {ref, onMounted, watch, computed} from 'vue';
import axios from "axios";
import {snackbar} from './store'
import moment from 'moment'

// 查询
const itemsPerPage = ref(10);
const headers = [
    {title: '序号', key: 'num', sortable: false},
    {title: '地点', key: 'placeName', sortable: false},
    {title: '巡检员', key: 'checkUserName', sortable: false},
    {title: '上报内容', key: 'checkContent', sortable: false},
    {title: '是否正常', key: 'isAbnormal', sortable: false},
    {title: '时间', key: 'time', sortable: false},
    {title: '是否巡检', key: 'isCheck', sortable: false}
];
const items = ref([]);
const loading = ref(true);
const totalItems = ref(0);
const dateSearch = ref(new Date());
const isCheck = ref(0);

const search = ref(moment(new Date()).format('YYYY-MM-DD'));
const name = ref(moment(new Date()).format('YYYY-MM-DD'));
const checkName = ref(null);
watch(name, () => {
    search.value = name.value
})
watch(isCheck, () => {
    search.value = isCheck.value
})
watch(checkName, () => {
    search.value = checkName.value
})

function loadItems() {
    loading.value = true;
    axios.post('/checkRecord/getDayRecord', {
        date: name.value,
        isCheck: isCheck.value
    }).then(({data}) => {
        items.value = data.data;
        totalItems.value = data.data.length;
        loading.value = false;
    })
}

onMounted(() => {
    loadItems();
});

// 增改
const isShowDialog = ref(false)

function changeDate() {
    name.value = moment(dateSearch.value).format('YYYY-MM-DD')
    isShowDialog.value = false
}

function downloadFile() {
    let obj = {
        date: name.value,
        isCheck: isCheck.value
    }
    axios({
        method: "POST",
        url: "/checkRecord/dayExport",
        responseType: 'blob',
        data: obj
    }).then(res => {
        console.log(res)
    }, err => {
        let blob = new Blob([err.data], {type: "application/vnd.ms-excel"});
        let fileName = `${name.value}日报表.xls`
        if ("download" in document.createElement("a")) {
            // 支持a标签download的浏览器
            const link = document.createElement("a"); // 创建a标签
            link.download = fileName; // a标签添加属性
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            document.body.appendChild(link);
            link.click(); // 执行下载
            URL.revokeObjectURL(link.href); // 释放url
            document.body.removeChild(link); // 释放标签
        } else {
            // 其他浏览器
            navigator.msSaveBlob(blob, fileName);
        }
    })
}

</script>

<template>
    <v-toolbar density="compact">
        <v-toolbar-title>日报表</v-toolbar-title>
        <!-- <v-text-field v-model="checkName" :clearable="true" hide-details placeholder="查询地点"></v-text-field> -->
        <v-select v-model="isCheck" :items="[{value:0,title:'未巡检'},{value:1,title:'已巡检'}]" label="是否巡检" :clearable="true" hide-details></v-select>
        <v-text-field v-model="name" readonly :clearable="true" hide-details placeholder="巡检时间" @click="isShowDialog = true"></v-text-field>
        <v-dialog v-model="isShowDialog" max-width="500px">
            <v-date-picker v-model="dateSearch" @update:model-value="changeDate"></v-date-picker>
        </v-dialog>
        <v-btn icon="mdi-upload" @click="downloadFile"></v-btn>
    </v-toolbar>
  <!--  分页文本待更换   items-per-page-text="每页数量"-->
    <v-data-table-server :search="search" :items-per-page="totalItems" :headers="headers" :items-length="totalItems"
    :items="items"
    :loading="loading"
    class="elevation-1"
    items-per-page-text="每页数量"
    @update:options="loadItems">
        <template v-slot:item.num="{ index }">
            <span>{{ index + 1 }}</span>
        </template>
        <template v-slot:item.isCheck="{ item }">
            <span v-if="item.raw.isCheck === 0">未巡检</span>
            <span v-if="item.raw.isCheck === 1">已巡检</span>
        </template>
        <template v-slot:item.isAbnormal="{ item }">
            <span v-if="item.raw.isAbnormal === 0">正常</span>
            <span v-if="item.raw.isAbnormal === 1">异常</span>
        </template>
    </v-data-table-server>
</template>

<style scoped lang="less">

</style>
